import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { setLayers } from "@/store";

export default function Po() {
  const dispatch = useDispatch();
  const layers = useSelector((state) => {
    return state.layers;
  });
  const openModel = (name) => {
    dispatch(
      setLayers({
        query: {},
        name,
        other: {},
      })
    );
    console.log(layers);
  };

  return (
    <>
      <div className="content">
        <div className="content-item w-50">
          <div className="content-val text-overflow color-green">25,627</div>
          <div className="content-title">无po完工产值</div>
        </div>
        <div className="content-item w-50" onClick={() => openModel("model3")}>
          <div className="content-val text-overflow color-green ">25,627</div>
          <div className="content-title">po人数</div>
        </div>
        <div className="content-item w-50">
          <div className="content-val text-overflow color-green">25,627</div>
          <div className="content-title">及时冲销无po产值</div>
        </div>
        <div className="content-item w-50" onClick={() => openModel("model1")}>
          <div className="content-val text-overflow color-green ">25,627</div>
          <div className="content-title">无po人数</div>
        </div>
        <div className="content-item w-100" onClick={() => openModel("model2")}>
          <div className="content-val text-overflow color-green text-stroke-green">
            25,627
          </div>
          <div className="content-title">无po产值预警</div>
        </div>
      </div>
    </>
  );
}
